<template>
  <div id="personalcenter">
    <div class="header">
      <div class="pic">
        <img :src="perArr[0].creator.backgroundUrl" />
      </div>
      <div class="in">
        <div class="top">
          <div class="left">
            <p>2399</p>
            <p>听歌数</p>
          </div>
          <div class="middle">
            <img :src="perArr[0].creator.avatarUrl" />
          </div>
          <div class="right">
            <p>352</p>
            <p>粉丝数</p>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-mingzi">
            <p>{{ perArr[0].creator.nickname }}</p>
            <p></p>
          </div>
          <div class="bt-guanzhu">
            <div class="bottom-guanzhu">
              <p>1</p>
              <p>关注</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h3>歌单({{ perArr.length }})</h3>
    <div class="text">
    <template v-for="item in perArr">
      <div :key="item.id" class="body">
        <div class="neirong-itm">
          <div class="neirong-left">
            <img :src="item.coverImgUrl" />
          </div>
          <div class="neirong-right">
            <p>{{ item.name }}</p>
            <p>{{ item.trackCount }}首,播放{{ item.playCount / 10000 }}万次</p>
          </div>
        </div>
      </div>
    </template>
    </div>
    <div class="fo">
      <div class="fo-w">
        <span>
          <i class="iconfont icon-watermelon" style="font-size: 36px"></i>
          去TA的个人主页</span
        >
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data: () => {
    return {
      perArr: [],
    };
  },
  async mounted() {
    let res = await this._axios.get(
      `/user/playlist?uid=${this.$route.params.id}`
    );
    // let res = await this._axios.get("/user/playlist?uid=1398221246");
    this.perArr = res.data.playlist;
    console.log(this.perArr);
    console.log(res.data);
  },
};
</script>

<style lang="scss" scoped >
#personalcenter {
  overflow: auto;

  h3 {
    height: _vw(50);
    padding-left: _vw(20);
    background-color: #eeeff0;
    font-size: _vw(12);
    color: #666;
    line-height: _vw(50);
  }
  .header {
    // background-position-y: _vw(-100);
    // background-size: cover;
    position: relative;
    height: _vw(485);
    width: _vw(750);
    background-color: rgba(0, 0, 0, 0.5);
    .pic {
      height: _vw(485);
      position: relative;
      z-index: -11;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .in {
      top: _vw(120);
      position: absolute;
      width: _vw(750);
      height: _vw(300);

      .top {
        height: _vw(160);
        display: flex;
        justify-content: space-around;
        align-items: center;

        .left {
          p:first-child {
            color: #fff;
            text-align: center;
          }
          p:last-child {
            color: #9b9184;
            text-align: center;
          }
        }
        .right {
          p:first-child {
            color: #fff;
            text-align: center;
          }
          p:last-child {
            color: #9b9184;
            text-align: center;
          }
        }
        .middle {
          width: _vw(150);
          height: _vw(150);
          img {
            width: 100%;
            border-radius: 50%;
          }
        }
      }

      .bottom {
        height: _vw(140);

        .bottom-mingzi {
          display: flex;
          justify-content: center;

          p:first-child {
            color: #fff;
            text-align: center;
            font-size: _vw(40);
          }
          p:last-child {
            color: red;
            text-align: center;
          }
        }
        .bt-guanzhu {
          display: flex;
          justify-content: center;
          .bottom-guanzhu {
            margin-top: _vw(20);
            display: flex;
            justify-content: center;
            align-items: center;
            height: _vw(60);
            width: _vw(300);
            border: _vw(1) solid #fff;
            border-radius: _vw(30);

            p:first-child {
              color: #fff;
              text-align: center;
            }
            p:last-child {
              color: #fff;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .text{
    margin-bottom: _vw(100);
    .body {
    .neirong-itm {
      display: flex;
      position: relative;
      align-items: center;
      padding-left: _vw(12);
      height: _vw(105);
      .neirong-left {
        position: relative;
        top: _vw(6);

        margin-right: _vw(20);
        img {
          width: _vw(100);
          height: _vw(100);
        }
      }
      .neirong-right {
        height: _vw(100);
        p:first-child {
          font-size: _vw(36);
          margin-top: _vw(12);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: _vw(600);
        }
        p:last-child {
          font-size: _vw(12);
          margin-top: _vw(12);
          color: #9b9184;
        }
      }
    }
     
  }
  }
  

  .fo {
    .fo-w {
      background-color: #fff;
      height: _vw(100);
      width: _vw(750);
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        display: flex;
        justify-content: center;
        width: _vw(610);
        height: _vw(80);
        background-color: #ff3a3a;
        text-align: center;
        line-height: _vw(80);
        border-radius: _vw(50);
        color: #fff;
        font-size: _vw(36);
      }
    }
  }
}
</style>